<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>模板管理</title>
<link href="<%=path%>/favicon.ico" rel="shortcut icon">

<link rel="stylesheet" type="text/css"
	href="<%=path%>/css/marketing/public.css" />

<link href="<%=path%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<link href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
<link href="<%=path%>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="<%=path%>/hplus/css/animate.min.css" rel="stylesheet">
<link href="<%=path%>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.css">

</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
			   <div class="ibox">
			    <div class="ibox-content text-right">
			      <h3>
						<span>
						<!-- <a  href="javascript:showDesignDialog();" style="margin-right: 15px;"><font color="#337ab7">请专家设计</font></a> -->
						<!-- <button id="create_model" type="button" class="btn btn-primary">请专家设计</button> -->
						
						<shiro:hasPermission name="markting_activity_h5:create_template"><button id="create_model" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal5">新建模板</button></shiro:hasPermission>
						</span>
					</h3>
			    </div>
			   </div>   
			 </div> 
			<div class="col-md-12">
				<div class="col-md-12" style="margin-bottom: 15px;">
				    <form action="" class="form-inline">
					    <div class="form-group">
					       <label>关键字</label>
					       <input class="form-control" type="text" id = "input_search"   maxlength="15" onblur="checkLength(this)"/>
					    </div>
					    <div class="form-group" style="margin-left: 15px;">
					        <button id="search_button" type="button" class="btn btn-primary">搜索
		                    </button>
					    </div>
				    </form> 
			   </div>
				<%-- <span>手机号或编码</span><input type="text"  class="form-control" id="shou" onkeypress="keyPress()" maxlength="15"/> 
					<shiro:hasPermission name="bm_write_off_search_button">
					<button type="button" id="phone" class="btn btn-primary">搜索</button>
					</shiro:hasPermission> --%>
			</div >
		    <div class="col-md-12">
		    
		       <table class="table table-bordered table-hover white-bg" style="margin-bottom: 30px;">
					<thead>
						<tr >
							<th style="width: 25%;">模板名称</th>
							<th style="width: 8%;">创建人</th>
							<th style="width: 14%;">创建时间</th>
							<th style="width: 8%;">引用次数</th>
							<th style="width: 14%;">最近一次调用时间</th>
							<th style="width: 14%;">最近一次修改时间</th>
							<th style="width: 8%;">修改人</th>
							<th style="width: 9%;">操作</th> 
						</tr>
					</thead>
					<tbody id="model_list">
					</tbody>
				</table>
				<div id="content_empty"  hidden="" class="form-group white-bg" style="text-align:center;padding:200px 0;margin:0;">   
                    <p id="createModelTip">您还没有创建模板，请快创建模板吧</p>
                    <shiro:hasPermission name="markting_activity_h5:create_template"><button id="createModel" class="btn btn-primary" type="button" data-toggle="modal" data-target="#myModal5">新建模板</button></shiro:hasPermission>
                </div>
		    
		    </div>
				<div class="m_xpages">
					<div class="mian">
						<span>显示行数</span> 
						<select>
							<option>5</option>
							<option>8</option>
							<option>11</option>
						</select> 
						<span>共80条</span> <span>1/4页</span> 
						<a href="javascript:;" class="prev">上一页</a> 
						<a href="javascript:;" class="next">下一页</a> 
						<span>前往</span><input type="text" value="1" class="text"><span>页</span>
					</div>
				</div> 
			</div>
		</div>
		</div>

		<!-- 选择新建模板样式  弹出框-->
		<%-- <div class="s_popups">
			<div class="m_xconsum">
				<div class="wire"></div>
				<div class="title">
					<i class="J_sclose"><img src="<%=path%>/images/marketing/close.png" /></i>选择新建模板样式
				</div>
				<ul  class="fix">
					<li><img class="choseType" id="pic_text" src="<%=path%>/images/marketing/icon_wxz.png" />图文</li>
					<li><img class="choseType" id="photo" src="<%=path%>/images/marketing/icon_xz.png" />相册</li>
				</ul>
				<ol class="fix">
					<li><a href="javascript:;" class="s_cancel">取消</a></li>
					<li><a href="javascript:;" class="k_verify">下一步</a></li>
				</ol>
			</div>
		</div> --%>

		

    
     
    <div hidden="" class="modal inmodal fade" id="myModal5" tabindex="-1" role="dialog"  aria-hidden="true">
	    <div class="modal-dialog modal-sm">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	                <h4 class="modal-title">专家设计</h4>
	            </div>
	            <div class="modal-body text-center">
	                <ul  class="row">
						<li class="col-md-6"><img class="choseType" id="pic_text" src="<%=path%>/images/marketing/icon_wxz.png" />图文</li>
						<li class="col-md-6"><img class="choseType" id="photo" src="<%=path%>/images/marketing/icon_xz.png" />相册</li>
				    </ul>
	            </div>
	             <div class="modal-footer">
                     <button type="button" class="btn btn-white s_cancel " data-dismiss="modal">取消</button>
                     <button type="button" class="btn btn-primary k_verify">下一步</button>
                 </div>
		     </div>
	    </div>
	</div> 
    <form hidden="" id="desin_html" method="get" class="form-horizontal m-t">
         <div class="form-group">
             <label class="col-sm-3 control-label">姓名</label>
             <div class="col-sm-8">
                 <input id="name" type="text" class="form-control"  aria-required="true">
             </div>
         </div>
         <div class="form-group">
             <label class="col-sm-3 control-label">电话</label>
             <div class="col-sm-8">
                 <input id="phone" type="text" class="form-control"  aria-required="true">
             </div>
         </div>
         <div class="form-group">
             <label class="col-sm-3 control-label">页面数</label>
             <div class="col-sm-8">
                 <input id="pageNum" type="text" class="form-control"  aria-required="true">
             </div>
         </div>
         <div class="form-group">
             <label class="col-sm-3 control-label">描述</label>
             <div class="col-sm-8">
                 <input id="desc" type="text" class="form-control"  aria-required="true">
             </div>
         </div>
     </form>
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/lengthlimit.js"></script>
	<script src="<%=path%>/hplus/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="<%=path%>/hplus/js/content.min.js?v=1.0.0"></script>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
    <script type="text/javascript" src="<%=path%>/js/marketing/dialog-plus.js"></script>  
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
     
    <script src="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/dialog.js"></script>
	<script src="<%=path%>/js/marketing/public.js"></script>
		<script src="<%=path%>/js/dateUtils.js"></script>
	<script type="text/javascript">
	
	var key_word="";
	var access_token=$.cookie('access_token');
    var cid=$.cookie('cid');
	var uid=$.cookie('uid');
	var startIndex=0;
	var pageSize=5;
    var currentPage = 1;
    var pageCount = 0;
    var choseType="photo";
    var model_type;
    
    var manage_model_id;
    $('.k_delect_btn').click(function(){
        $('.s_popup_delect,.issue_delect').show();
    });

    $('.s_cancel,.issue_delect span').click(function(){
        $('.s_popup_delect,.issue_delect').hide();
    });
    $('.s_cancel1,.issue_delect1 span').click(function(){
        $('.s_popup_delect1,.issue_delect1').hide();
    });
/* 		$('#create_model').click(function() {
			$('.s_popups,.m_xconsum').show();
		}); */
		$('.s_cancel,.J_sclose').click(function() {
			$('.s_popups,.m_xconsum').hide();
		});
		$('#expert_design').click(function() {
			$('.s_popup,.m_consum').show();
		});
		$('.k_cancel,.J_close').click(function() {
			$('.s_popup,.m_consum').hide();
		});
		$('.k_submit').click(function() {
			$('.s_popup,.m_consum').hide();
			$('.s_popup1,.s_consum').show();
			$('.s_popup1,.s_consum').delay(3000).fadeOut();
		});
		$('#search_button').click(function() {
			key_word=(document.getElementById('input_search')).value;
			getModelList();
		});
		$(document).on("click",".choseType",function(e){
			choseType=this.id;
			if(choseType=="photo"){
				document.getElementById('photo').src='<%=path%>/images/marketing/icon_xz.png';
				document.getElementById('pic_text').src='<%=path%>/images/marketing/icon_wxz.png';
			}else{
				document.getElementById('pic_text').src='<%=path%>/images/marketing/icon_xz.png';
				document.getElementById('photo').src='<%=path%>/images/marketing/icon_wxz.png';
			}
		});
		//下一步
		$('.k_verify').click(function() {
			if(choseType=="photo"){
				window.location.href = "<%=path%>/view/ui/photoAlbum?type=model";
			}else{
				window.location.href = "<%=path%>/view/ui/createModel?type=model";
			}
		});
		
				
	     //复制活动
        $(document).on('click', '.copyModel', function() {
        	var model_id=$(this).attr("modelId");
			model_type=$(this).attr("model_type");
			if(model_type=="defined_pic"){
				window.location.href = "<%=path%>/view/ui/photoAlbum?type=model_copy&model_id="+model_id;
			}else{
				window.location.href = "<%=path%>/view/ui/createModel?type=model_copy&model_id="+model_id;
			}
			});
        //编辑活动
        $(document).on('click', '.editModel', function() {
				var model_id=$(this).attr("modelId");
				model_type=$(this).attr("model_type");
				//lockStatus(model_id,model_type);
				if(model_type=="defined_pic"){
					window.location.href = "<%=path%>/view/ui/photoAlbum?type=model&model_id="+model_id;
				}else{
					window.location.href = "<%=path%>/view/ui/createModel?type=model&model_id="+model_id;
				}
				
			});
        //删除活动
        $(document).on('click', '.deleteModel', function() {
        	manage_model_id=$(this).attr("modelId");
        	deletedDilog();
		});
        
		//初始化
		$(function(){
			
			getModelList();
			
		});
		function getModelList() {
			var url= "<%=path%>/activityDefinedTemplate/ajaxTemplateList";
        	$.post(url, {
        		"access_token" : access_token,
				"uid" : uid,
				"startIndex" : startIndex,
				"pageSize" : pageSize,
				"name":key_word,
			}, function(data) {
				if(data.status == 200){
					modelListHtml(data.data);
					page(data.totalCount);
					$('#model_list').show();
					$('#content_empty').hide();
					$('.m_xpages').show();
				}else if(data.status=="201"){
					$('#model_list').hide();
					$('#content_empty').show();
					if(StringEmpty(key_word)){
						$('#createModelTip').html("无模板数据");
						$('#createModel').hide();
					}
					$('.m_xpages').hide();
					
				}
			});
        	
		}
		
		//复制模板
		function copyModel(modelId) {
			
		}
		//编辑模板
        function editModel(modelId) {
			
		}
		//删除模板
        function deleteModel() {
        	var url= "<%=path%>/activityDefinedTemplate/ajaxDeleteTemplate";
        	var lineId="#line"+manage_model_id;
        	$('.s_popup_delect,.issue_delect').hide();
        	$.post(url, {
        		"access_token" : access_token,
				"uid" : uid,
				"templateId" : manage_model_id,
			
			}, function(data) {
				
				if(data.status == 200){
					$(lineId).remove();
					successDialog("删除成功！","");
				}else{
					errorDialog("删除失败",data.message);
				}
			});
        }
        function lockStatus(model_id,model_type) {
        	var url= "<%=path%>/activityDefinedTemplate/ajaxLockTemplate";
        	$.post(url, {
        		"access_token" : access_token,
				"uid" : uid,
				"id" : model_id,
				"status":1,
			}, function(data) {
				
				if(data.error_code==0){
					if(model_type=="defined_pic"){
						window.location.href = "<%=path%>/view/ui/photoAlbum?type=model&model_id="+model_id;
					}else{
						window.location.href = "<%=path%>/view/ui/createModel?type=model&model_id="+model_id;
					}
				}else{
					errorDialog(data.message,"");
				}
			});
        }
		
		function modelListHtml(data) {
			var html="";
			for(var i=0;i<data.length;i++){
				var thumbnail_pic="";
				if(StringEmpty(data[i].thumbnailPic)){
					thumbnail_pic=data[i].thumbnailPic;
				}
				html+='<tr id="line'+data[i].id+'"><td><dl class="k_img_box">';
				html+='<dt><img style="width: 75px; height: 90px" src="'+(thumbnail_pic!=""? thumbnail_pic : "<%=path%>/images/marketing/k_img.png")+'"/></dt>';
				html += '<dd style="padding: 6px;"><h6 style="color: #03a9f4;">' + data[i].name + '</h6></dd></dl></td>';
				html += '<td>' + data[i].createUserIdName + '</td>';
				html += '<td>' + formatDateTimeYMD(data[i].createTime) + '</td>';
				html += '<td>' + data[i].useNum + '</td>';
				html += '<td>' + (data[i].useTime!=undefined ?formatDateTimeYMD(data[i].useTime) : "" ) + '</td>';
				html += '<td>' + (data[i].updateTime!=undefined ? formatDateTimeYMD(data[i].updateTime) : "" ) + '</td>';
				html += '<td>' + data[i].updateName + '</td>';
				html += '<td><shiro:hasPermission name="markting_activity_h5:copy_template"><a href="javascript:;" model_type="'+data[i].type+'" modelId="'+data[i].id+'" class="copyModel"><font color="#18a689">复制</font></a></shiro:hasPermission><br />';
				html += '<shiro:hasPermission name="markting_activity_h5:update_template"><a href="javascript:;" model_type="'+data[i].type+'" modelId="'+data[i].id+'" class="editModel"><font color="#18a689">编辑</font></a></shiro:hasPermission><br />';
				html += '<shiro:hasPermission name="markting_activity_h5:delete_template"><a href="javascript:;" modelId="'+data[i].id+'" class="deleteModel"><font color="#18a689">删除</font></a></shiro:hasPermission></td></tr>';
			}
			$('#model_list').html(html);
			imageLoadError();
		}
		  

		  $(".m_xpages select").change(function(){
		 		pageSize = Number($(this).val());	
		 		startIndex = 0;
		 		getModelList();
		 	});
			 	
		 	$(".m_xpages a.prev").click(function(){	 		
		 		if(currentPage > 1){
		 			currentPage--;
		 			startIndex -= pageSize;	 	
		 			getModelList();
		 		}
		 	});
		 	
		 	$(".m_xpages a.next").click(function(){
		 		if(currentPage < pageCount){
		 			currentPage++;
		 			startIndex += pageSize;	
		 			getModelList();
		 		}
		 	});
		 	
		 	$(".m_xpages :text").keyup(function(e){
				if(e.keyCode==13){
					var pageGo = $(this).val();
					if(/^[0-9]+$/.test(pageGo)){
						pageGo = Number(pageGo);
						if(pageGo<1 || pageGo>pageCount){
							showDialog('请输入合法页数');
						}else if(pageGo != currentPage){
							startIndex = (pageGo -1) * pageSize ;	
							getModelList();
						}
					}else{
						showDialog('请输入合法页数');
					}
				}
			});

		 	function page(totalCount){
		 		pageCount = totalCount/pageSize;
		 		if (totalCount % pageSize > 0)
		 			pageCount++;
		 		pageCount = parseInt(pageCount);
		 		currentPage =  startIndex / pageSize + 1;
		 		currentPage = parseInt(currentPage);
		 		if(currentPage == 1){
		 			$(".prev").addClass("pageDisable");
		 		}else{
		 			$(".prev").removeClass("pageDisable");
		 		}
		 		
		 		if(currentPage == pageCount || pageCount == 0){
		 			$(".next").addClass("pageDisable");
		 		}else{
		 			$(".next").removeClass("pageDisable");
		 		}
		 		
		 		$(".m_xpages>.mian>span:eq(1)").text('共'+totalCount+'条');
		 		$(".m_xpages>.mian>span:eq(2)").text(currentPage+'/'+pageCount+'页');
		 	}
		 	
		 	function gotoLogin(){
				 $('#afreshLogin,.issue_delect1').hide(); 
				window.location.href="<%=path%>/ui/loginPwd";
			}
		 	

			//判断字符串是否为空
			function StringEmpty(content) {
				if (content == undefined || content == "" || content == null) {
					return false;
				} else {
					return true;
				}
			}
			
			
			
		function showDialog(title){
			$('#dialog_title').html('<img src="<%=path%>/images/marketing/s_tick.png"/>'+title+''); 
			$('.s_popup_delect2,.s_consum').show().delay(2000).fadeOut();
		}
		
		
		function showDesignDialog(){
			var d = dialog({
				title: '请专家设计',
				content: $('#desin_html'),
				okValue: '确定',
				ok: function () {
					var name=$('#name').val();
					var phone=$("#phone").val();
					var pageNum=$("#pageNum").val();
					var desc=$("#desc").val();
					console.log(name+","+phone+","+pageNum+","+desc);
					if(StringEmpty(name)&&StringEmpty(phone)&&StringEmpty(pageNum)&&StringEmpty(desc)){
						this.title('提交中…');
						d.close().remove();
						successDialog("提交成功","");
					}else{
						promptDialog("请将信息填写完整");
					}
					return false;
				},
				cancelValue: '取消',
				cancel: function () {
					d.close().remove();
				}
			}).width(450);
			d.showModal();
			
		}
		function promptDialog(content){
			var d = dialog({
				content: content
			});
			d.show();
			setTimeout(function () {
				d.close().remove();
			}, 1000);
		}
		
		
		function deletedDilog(){
			swal({
				  title: '您确定要删除此模板吗?',
				  text: "删除后将无法恢复，请谨慎操作！",
				  type: 'warning',
				  showCancelButton: true,
				  confirmButtonColor: '#d33',
				  cancelButtonColor: '#3085d6',
				  confirmButtonText: '删除',
				  cancelButtonText:'取消'
				}).then(function () {
					deleteModel();
				})
		}
	</script>

    <script type="text/javascript">
	function exit(){
		$.post(
				"<%=path%>/api/login/exit",
				{},
				function(data){
					if(data.error_code == "0"){
						alert("已退出");
						window.location.href="<%=path%>/ui/home";
					}
				},
				"json");
	}
</script>
</body>
</html>